<template>
    <v-distpicker :province="province" :city="city" :area="area"  @selected="updateValue" v-bind="$attrs"></v-distpicker>
</template>
<script>
import VDistpicker from "v-distpicker";
import { exportWidthInfo } from "../../utils";
export default {
	components: { VDistpicker },
	props: {
		value: [Array, Object, String],
		options: {
			type: Object,
			default: {}
		}
	},
	computed: {
		province() {
			return (
				this.value && this.value.province && this.value.province.value
			);
		},
		city() {
			return this.value && this.value.city && this.value.city.value;
		},
		area() {
			return this.value && this.value.area && this.value.area.value;
		}
	},
	methods: {
		updateValue(val) {
			this.$emit("input", val);
			this.$nextTick(_ => this.$emit("blur")); //本组件采取了手动触发blur事件去执行验证，因为v-distpicker在选择后似乎并不会触发blur事件
		}
	},
	created() {
		this.$emit(
			"dispatch-width",
			exportWidthInfo(this.options.display, 400)
		);
	}
};
</script>
